
{% if theme_preview == '1' or storeConfig.comments_status == '1' %}

{% stylesheet %}
.block_comment .block_comment_list ul {
    display: grid;
    row-gap: 60px;
    column-gap: 60px;
    grid-template-columns: repeat(3, calc(33.333% - 40px));
}

.block_comment .block_comment_list li {
    text-align: center;
    list-style-type: none;
    overflow: hidden;
}

.block_comment .block_comment_list li .block_comment_list_svg {
    margin-bottom: 30px;
}

.block_comment .block_comment_list li .block_comment_list_star {
    margin-bottom: 30px;
    height: 16px;
}
.block_comment .block_comment_list li .block_comment_list_star svg + .block_comment .block_comment_list li .block_comment_list_star svg{
    margin-left: 4px;
}

.block_comment .block_comment_list li .block_comment_list_content {
    margin-bottom: 10px;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    color: var(--detail_color);
}
.block_comment .block_comment_list li .block_comment_list_time{
    color: var(--detail_color);
    margin-bottom: 10px;
}

.block_comment .block_comment_list li .block_comment_list_author {
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.block_comment .block_comment_list li .block_comment_list_author img{
    width: 20px;
    margin-right: 5px;
}
.block_comment .block_comment_more{
    text-align: center;
    margin-top: calc(var(--general_layout_spacing) * 0.5);
}
.block_comment .block_comment_more a{
    margin-top: 0;
}

@media (max-width: 767px) {
    .block_comment .block_comment_list ul {
        display: block;
    }
    .block_comment .block_comment_list li {
        margin-bottom: 60px;
    }
    .block_comment .block_comment_list li .block_comment_list_star{
        margin-bottom: 20px;
    }
    .block_comment .block_comment_list li .block_comment_list_svg{
        margin-bottom: 20px;
        height: 24px;
    }
}
{% endstylesheet %}
<div class="block_comment">
    <div class="container_wrapper">
        {% if section.settings.title != '' or section.settings.detail != '' %}
        <div class="block_title">
            {% if section.settings.title != '' %}<h2>{{ section.settings.title }}</h2>{% endif %}
            {% if section.settings.detail != '' %}<div class="block_detail">{{ section.settings.detail }}</div>{% endif %}
        </div>
        {% endif %}
        <div class="block_comment_list">
            <ul style=" grid-template-columns: repeat({{ section.settings.row  }}, 1fr);">
                {% get_comments sort_order=id star={section.settings.level} sort_type={ section.settings.time } limit={section.settings.num}  %}
                {% if comments %}
                {% for comment in comments %}
                <li>
                    <div class="block_comment_list_svg">{% include icon_block_dot ,{width:'24',height:'24'} %}</div>
                    <div class="block_comment_list_star">
                        {% for index in (1..5) %}
                        {% if index <= comment.star %}
                        {% include icon_block_star ,{width:'16',height:'16',color: '#F8AD6B'} %}
                        {% else %}
                        {% include icon_block_star ,{width:'16',height:'16',color: '#bbbbbb'} %}
                        {% endif %}                        
                        
                        {% endfor %}
                    </div>

                    <div class="block_comment_list_content">
                        {{ comment.content }}
                    </div>
                    {% if comment.created_at != "" %}
                    <div class="block_comment_list_time"><span class="format-date" data-date="{{ comment.created_at }}" data-format="YYYY-mm-dd">{{comment.created_at | date: "%Y-%m-%d"}}</span></div>
                    {% endif %}
                    <div class="block_comment_list_author"><img src="{{ comment.national_flag }}" /> {{ comment.customer_name }}</div>
                </li>
                {% endfor %}
                
                {% else %}
                  <li>
                    <div class="block_comment_list_svg">{% include icon_block_dot ,{width:'24',height:'24'} %}</div>
                    <div class="block_comment_list_star">
                        {% include icon_block_star ,{width:'16',height:'16',color: '#F8AD6B'} %}
                        {% include icon_block_star ,{width:'16',height:'16',color: '#F8AD6B'} %}
                        {% include icon_block_star ,{width:'16',height:'16',color: '#F8AD6B'} %}
                        {% include icon_block_star ,{width:'16',height:'16',color: '#F8AD6B'} %}
                        {% include icon_block_star ,{width:'16',height:'16',color: '#F8AD6B'} %}
                    </div>
                    <div class="block_comment_list_content">
                        Add customer reviews and testimonials to showcase your store’s happy customers.
                    </div>
                    <div class="block_comment_list_author">— Author's name</div>
                  </li>
                  <li>
                    <div class="block_comment_list_svg">{% include icon_block_dot ,{width:'24',height:'24'} %}</div>
                    <div class="block_comment_list_star">
                        {% include icon_block_star ,{width:'16',height:'16',color: '#F8AD6B'} %}
                        {% include icon_block_star ,{width:'16',height:'16',color: '#F8AD6B'} %}
                        {% include icon_block_star ,{width:'16',height:'16',color: '#F8AD6B'} %}
                        {% include icon_block_star ,{width:'16',height:'16',color: '#F8AD6B'} %}
                        {% include icon_block_star ,{width:'16',height:'16',color: '#F8AD6B'} %}
                    </div>
                    <div class="block_comment_list_content">
                        Add customer reviews and testimonials to showcase your store’s happy customers.
                    </div>
                    <div class="block_comment_list_author">— Author's name</div>
                  </li>
                  <li>
                    <div class="block_comment_list_svg">{% include icon_block_dot ,{width:'24',height:'24'} %}</div>
                    <div class="block_comment_list_star">
                        {% include icon_block_star ,{width:'16',height:'16',color: '#F8AD6B'} %}
                        {% include icon_block_star ,{width:'16',height:'16',color: '#F8AD6B'} %}
                        {% include icon_block_star ,{width:'16',height:'16',color: '#F8AD6B'} %}
                        {% include icon_block_star ,{width:'16',height:'16',color: '#F8AD6B'} %}
                        {% include icon_block_star ,{width:'16',height:'16',color: '#F8AD6B'} %}
                    </div>
                    <div class="block_comment_list_content">
                        Add customer reviews and testimonials to showcase your store’s happy customers.
                    </div>
                    <div class="block_comment_list_author">— Author's name</div>
                  </li>
                {% endif %}
            </ul>
        </div>
        {% if section.settings.more_text != ""%}
        <div class="block_comment_more"><a class="secondary_btn" href="/comments">{{ section.settings.more_text }}</a></div>
        {% endif %}
    </div>
</div>
{% endif %}

{% schema %}
{
  "tag": "section",
  "class": "block_comment",
  "is_global": false,
  "name": {
    "zh_CN": "文字评论"
  },
  "max_blocks": "",
  "settings": [
    {
      "type": "card_header",
      "label": {
        "zh_CN": "设置"
      }
    },
    {
      "type": "card_input",
      "id": "title",
      "label": {
        "zh_CN": "标题"
      },
      "placeholder": {
        "zh_CN": "请输入标题"
      },
      "default": "Comment"
    },
    {
      "type": "card_text_editor",
      "id": "detail",
      "label": {
        "zh_CN": "简短描述"
      },
      "placeholder": {
        "zh_CN": "请输入描述"
      },
      "default": "Comment Detail"
    },
    {
      "type": "card_slider",
      "id": "row",
      "max": "6",
      "min": "3",
      "label": {
        "zh_CN": "pc每排数量"
      },
      "default": "4"
    },
    {
      "type": "card_slider",
      "id": "num",
      "max": "20",
      "min": "2",
      "label": {
        "zh_CN": "评论总数"
      },
      "default": "8"
    },
    {
      "type": "card_select",
      "id": "time",
      "label": {
        "zh_CN": "评论时间"
      },
      "option": [
        {
          "label": {
            "zh_CN": "最新评论"
          },
          "value": "desc"
        },
        {
          "label": {
            "zh_CN": "最早评论"
          },
          "value": "asc"
        }
      ],
      "default": "asc"
    },
    {
      "type": "card_select",
      "id": "level",
      "label": {
        "zh_CN": "评论星级"
      },
      "option": [
        {
          "label": {
            "zh_CN": "五星"
          },
          "value": "5"
        },
        {
          "label": {
            "zh_CN": "四星及以上"
          },
          "value": "4"
        },
        {
          "label": {
            "zh_CN": "三星及以上"
          },
          "value": "3"
        },
        {
          "label": {
            "zh_CN": "二星及以上"
          },
          "value": "2"
        },
        {
          "label": {
            "zh_CN": "一星及以上"
          },
          "value": "1"
        }
      ],
      "default": "4"
    },
    {
      "type": "card_input",
      "label": {
        "zh_CN": "查看更多文案"
      },
      "id": "more_text"
    }
  ],
  "blocks": [],
  "default": {
    "settings": {
      "title": "Customer Reviews",
      "detail": "",
      "row": "3",
      "num": "6",
      "time": "asc",
      "level": "4",
      "more_text": "View More"
    },
    "blocks": []
  }
}
{% endschema %}